.table {
  overflow-x: auto;
  width: 100%;
  padding-left: rem(8);
  font-size: rem(15);
  border: rem(1) solid var(--tertiary-color);

  .headerRow {
    background-color: var(--tertiary-color);

    .tableHeader {
      padding: 4px;
      text-align: center !important;
      border: 1px solid;
      color: var(--text-color) !important;
      border-color: var(--quaternary-color) !important;
      &.sortableColumn {
        cursor: pointer;
      }
      .sortIcon {
        display: inline-flex;
      }

      &.groupedColumn {
        background-color: var(--secondary-gray-color);
        border-color: var(--tertiary-color) !important;
      }
    }
    .fixedColumn {
      position: sticky;
      left: -16px;
      z-index: 2;
      background-color: var(--primary-color);
    }
  }
  .nodataRow {
    td {
      font-size: rem(16);
      font-weight: 500;
      text-align: center;
    }
  }
  .tableColumn {
    padding: rem(2) rem(4);
    border-right: 1px solid;
    border-color: var(--tertiary-color);
    border-bottom: none;
    height: 36px;
  }
  .tableColumnEven {
    background-color: var(--secondary-gray-color);
  }
  .redBlinking {
    background-color: var(--danger-tertiary-color);
  }
  .orangeBlinking {
    background-color: var(--warning-tertiary-color);
  }
}
.paginationContainer {
  gap: rem(8);
  align-items: center;
  margin-top: rem(16);
  margin-left: auto;
  flex-direction: column;
  @include breakpoint('md') {
    flex-direction: row;
  }
}
